<template>
  <div>
     <el-breadcrumb separator="/" style="height:10px;">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>客房预订管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-table
      :data="pageinfo.list"
      border
      style="width: 100%">
      <el-table-column
        prop="user.uname"
        label="客户"
        width="100">
      </el-table-column>

      <el-table-column
        prop="user.iphone"
        label="联系电话"
        width="150">
      </el-table-column>

      <el-table-column
        prop="user.certificateType.tname"
        label="证件类型"
        width="150">
      </el-table-column>

      <!-- <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          {{scope.row.gender == 0 ? '男':'女'}}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="user.idnumber"
        label="证件号"
        width="180">
      </el-table-column>

      <el-table-column
        prop="roomnumber"
        label="房间号"
        width="80">
      </el-table-column>

      <el-table-column
        prop="starttime"
        label="入住时间"
        width="150">
      </el-table-column>

      <el-table-column
        prop="endtime"
        label="离店时间"
        width="180">
      </el-table-column>

      <el-table-column
        prop="checkinnumber"
        label="入住人数"
        width="100">
      </el-table-column>

      <el-table-column label="状态" width="120">
        <template slot-scope="scope">
          {{scope.row.state == 1 ? '已预订':'未预订'}}
        </template>
      </el-table-column>

      <el-table-column label="管理操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="handleEdit(scope.row)">详情</el-button>
            <el-button
            size="mini"
            type="info"
            @click="cancel(scope.row.rid)">取消预订</el-button>
        </template>
        </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="guestVo.pageNum"
      :page-sizes="[3, 5, 7, 10]"
      :page-size="guestVo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageinfo.total">
    </el-pagination>

    <el-dialog
      title="用户详情"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div>客户 : {{guest.user.uname}}</div>
      <div>性别 : {{guest.user == 0 ? '男':'女'}}</div>
      <div>联系电话 : {{guest.user.iphone}}</div>
      <div>邮箱 : 无</div>
      <div>证件类型 : {{guest.user.certificateType.tname}}</div>
      <div>证件号码 : {{guest.user.idnumber}}</div>
      <div>房间号 : {{guest.roomnumber}}</div>
      <div>楼层 : {{guest.floor}}</div>
      <div>房间图片 : {{guest.roomimg}}</div>
      <div>入住时间 : {{guest.starttime}}</div>
      <div>离店时间 : {{guest.endtime}}</div>
      <div>入住人数 : {{guest.checkinnumber}}</div>
      <div>入住状态 : {{guest.state == 1 ? '已预订':'未预订'}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {findAllGuestWYYD,canceltheorder} from '../../api'
export default {
  data() {
    return {
      pageinfo : {}  ,
      guestVo : {
        pageNum : 1,
        pageSize : 5
      },
      dialogVisible : false, 
      guest : {
        user : {
          certificateType : {}
        }
      } //查询详情
    }
  },
  created() {
    this.findAll()
  },
  methods: {
     handleSizeChange(val) {
      this.guestVo.pageNum = 1
      this.guestVo.pageSize = val
      this.findAll();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.guestVo.pageNum = val
      this.findAll();
      // console.log(`当前页: ${val}`);
    },
    async findAll(){
      let {data:baseRefault} = await findAllGuestWYYD(this.guestVo) 
      this.pageinfo = baseRefault.data
    },
    handleEdit(guest){
      this.dialogVisible = true
      this.guest = guest
    },
    async cancel(rid){
      let {data:baseRefault} = await canceltheorder(rid)
      this.$message.success(baseRefault.message)
      this.findAll()
    }
  },

}
</script>

<style>

</style>